<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
         1. promise是什么?
          - promise就是一个容器, 内部封装了一个异步操作
          - 将来会给出一个结果, 这个结果有可能是成功的结果也有可能是失败的结果

         2. promise解决了什么问题?
          - 在我们之前的开发中, 一些异步操作都是通过回调函数完成的
          - 多个异步操作就会形成回调函数嵌套回调函数, 最终会形成回调地狱
          - 代码业务将变得非常难以维护
          - promise就是用链式调用的方式解决了回调地狱

         3. promise怎么使用?
          - promise中有三种状态: pending, fulfilled, rejected 
          - 状态是不可逆的: pending -> fulfilled   pending -> rejected

          - 定义
           const p = new Promise((resolve, reject)=>{
             // 内部封装了一个异步操作, 将来会给出一个结果
             // 通过resolve函数, 对外给出一个成功的结果; 此时, promise的状态由pending -> fulfilled
             // 通过reject函数, 对外给出一个失败的结果; 此时, promise的状态由pending -> rejected
           })

           - 使用:
           p.then((res)=>{
             // 接收resolve函数给出的成功的结果 
           }).catch((err)=>{
            // 接收reject函数给出的失败的结果
           })
            
        */

        // 需求1：开一个延时器 setTimeout，在延迟器结束后(2s)， 做某件事： alert 一个延时器结束了
        // 需求2：要做的事情，不希望写死，第一次 alert 一个zs， 第二次 console 一个ls
        // 需求3：希望是等待做完第一件事情之后，再等待做第二件事


        // ----------------------------------------------------
        // 1. 用回调函数方式实现
        // function fn(callback){
        //     setTimeout(()=>{
        //         callback()
        //     }, 2000)
        // }

        // // 调用
        // fn(()=>{
        //     // 第一件事情
        //     console.log('张三')
        //     // 第二件事情
        //     fn(()=>{
        //         console.log('李四')
        //         // 第三件事情
        //         fn(()=>{
        //             console.log('王五')
        //         })
        //     })
        // })


        // 2. 用promise方式实现
        // function fn(){
        //     return new Promise((resolve, reject)=>{
        //         // 内部封装一个异步操作
        //         setTimeout(()=>{
        //             resolve()
        //         }, 2000)
        //     })
        // }

        // fn().then(()=>{
        //     console.log('张三')
        //     return fn()
        // }).then(()=>{
        //     console.log('李四')
        //     return fn()
        // }).then(()=>{
        //     console.log('王五')
        // }).catch(()=>{

        // })

        // --------------async/await----------------
        // 本质上还是promise, 在语法上显得更加直观
        // 用同步的思维去执行异步操作
        // async function exam(){
        //     await fn()
        //     console.log('张三')

        //     await fn()
        //     console.log('李四')

        //     await fn()
        //     console.log('王五')
        // }

        // exam()

        // ---------------------
        function fn(){
            return new Promise((resolve, reject)=>{
                // 内部封装一个异步操作
                setTimeout(()=>{
                    resolve('你成功坚持了2秒')
                }, 2000)
            })
        }


        // fn().then().catch()

        async function exam(){
            const res = await fn()
            // console.log(res) // 直接打印拿到的是成功的结果
            // 凡是返回给外部, 默认就会把结果包装到一个promise中
            return res
        }

        const result = exam()
        // console.log(result)
        result.then((res)=>{
           console.log(res)
        })
    </script>
</body>
</html>